<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram - Shadows</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // --- Style and General Settings ---
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 2;
            ctx.font = "30px 'Times New Roman'";

            // --- Ground ---
            const y_ground = 380;
            ctx.beginPath();
            ctx.moveTo(0, y_ground);
            ctx.lineTo(800, y_ground);
            // Add hash marks for the ground surface
            for (let i = 0; i < 820; i += 25) {
                ctx.moveTo(i, y_ground);
                ctx.lineTo(i - 15, y_ground + 15);
            }
            ctx.stroke();

            // --- Light Source (Lamp) ---
            const lampX = 200;
            const lampY = 80;
            // Lamp support
            ctx.beginPath();
            ctx.moveTo(lampX - 30, lampY - 20);
            ctx.lineTo(lampX + 30, lampY - 20);
            // Lamp bulb
            ctx.arc(lampX, lampY, 15, 0, 2 * Math.PI);
            ctx.stroke();

            // --- Dashed line and O' point ---
            ctx.beginPath();
            ctx.setLineDash([8, 8]);
            ctx.moveTo(lampX, lampY + 15); // Start from bottom of the bulb
            ctx.lineTo(lampX, y_ground);
            ctx.stroke();
            // Reset line dash
            ctx.setLineDash([]);
            // Label O'
            ctx.fillText("O'", lampX - 35, y_ground - 5);

            // --- Person A (Taller) ---
            const xA = 370;
            const heightA = 160;
            const widthA = 30;
            const y_topA = y_ground - heightA;
            const head_radiusA = 20;
            const y_head_centerA = y_topA + head_radiusA;
            const y_body_topA = y_topA + 2 * head_radiusA;
            const y_legs_topA = y_ground - 50;

            ctx.beginPath();
            // Legs
            ctx.moveTo(xA - 8, y_ground);
            ctx.lineTo(xA - 8, y_legs_topA);
            ctx.moveTo(xA + 8, y_ground);
            ctx.lineTo(xA + 8, y_legs_topA);
            // Body
            ctx.rect(xA - widthA / 2, y_body_topA, widthA, y_legs_topA - y_body_topA);
            // Arm
            ctx.moveTo(xA - widthA/2, y_body_topA + 20);
            ctx.lineTo(xA + widthA/2, y_body_topA + 50);
            ctx.stroke();

            // Head and Cap
            ctx.beginPath();
            ctx.arc(xA, y_head_centerA, head_radiusA, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath(); // Separate path for cap so it doesn't connect
            ctx.arc(xA, y_head_centerA, head_radiusA, Math.PI, 1.5 * Math.PI);
            ctx.stroke();
            
            // Label A
            ctx.fillText("A", xA + 35, y_body_topA + 10);

            // --- Person B (Shorter) ---
            const xB = 620;
            const heightB = 110;
            const widthB = 24;
            const y_topB = y_ground - heightB;
            const head_radiusB = 15;
            const y_head_centerB = y_topB + head_radiusB;
            const y_body_topB = y_topB + 2 * head_radiusB;
            const y_legs_topB = y_ground - 35;

            ctx.beginPath();
            // Legs
            ctx.moveTo(xB - 6, y_ground);
            ctx.lineTo(xB - 6, y_legs_topB);
            ctx.moveTo(xB + 6, y_ground);
            ctx.lineTo(xB + 6, y_legs_topB);
            // Body
            ctx.rect(xB - widthB / 2, y_body_topB, widthB, y_legs_topB - y_body_topB);
            // Arm
            ctx.moveTo(xB - widthB/2, y_body_topB + 10);
            ctx.lineTo(xB + widthB/2, y_body_topB + 30);
            ctx.stroke();

            // Head and Cap
            ctx.beginPath();
            ctx.arc(xB, y_head_centerB, head_radiusB, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(xB, y_head_centerB, head_radiusB, Math.PI, 1.5 * Math.PI);
            ctx.stroke();

            // Label B
            ctx.fillText("B", xB + 25, y_body_topB + 10);
        };
    </script>
</body>
</html>